<template>
  <div class="index">
    <div class="f1">
      <div class="left">
        <index-lunbo />
      </div>
      <div class="center">
        <div class="top">
          <ul>
            <li @mouseover="cur1 = 1" :class="{ cur: cur1 == 1 }">热门</li>
            <li @mouseover="cur1 = 2" :class="{ cur: cur1 == 2 }">新闻</li>
            <li @mouseover="cur1 = 3" :class="{ cur: cur1 == 3 }">公告</li>
            <li @mouseover="cur1 = 4" :class="{ cur: cur1 == 4 }">活动</li>
            <li @mouseover="cur1 = 5" :class="{ cur: cur1 == 5 }">赛事</li>
          </ul>
        </div>
        <div class="body">
          <template v-if="cur1 == 1">
            <div>
              <index-gonggao :data="data1" title="热门" />
            </div>
          </template>
          <template v-else-if="cur1 == 2">
            <div>
              <index-gonggao :data="data2" title="新闻" type="qb" />
            </div>
          </template>
          <template v-else-if="cur1 == 3">
            <div>
              <index-gonggao :data="data3" title="公告" type="y" />
            </div>
          </template>
          <template v-else-if="cur1 == 4">
            <div>
              <index-gonggao :data="data4" title="活动" />
            </div>
          </template>
          <template v-else-if="cur1 == 5">
            <div>
              <index-gonggao :data="data5" title="赛事" type="b" />
            </div>
          </template>
        </div>
      </div>
      <div class="right">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="f2">
      <div>
        <img
          src="//ossweb-img.qq.com/upload/webplat/info/yxzj/20181210/86638782789061.jpg"
          alt=""
        />
      </div>
      <div>
        <img
          src="//ossweb-img.qq.com/upload/webplat/info/yxzj/20210113/239381533097800.png"
          alt=""
        />
      </div>
      <div>
        <img
          src="//ossweb-img.qq.com/upload/webplat/info/yxzj/20220402/19810610188363.jpg"
          alt=""
        />
      </div>
      <div>
        <img
          src="//ossweb-img.qq.com/upload/webplat/info/yxzj/20211013/82897411915786.png"
          alt=""
        />
      </div>
    </div>
    <div class="f3">
      <div class="left">
        <div class="top">
          <div>
            <span>内容中心</span>
          </div>
          <div>
            <span>更多</span>
          </div>
        </div>
        <div class="body">
          <ul>
            <li :class="{ cur: cur2 == 1 }" @mouseover="cur2 = 1">精品栏目</li>
            <li :class="{ cur: cur2 == 2 }" @mouseover="cur2 = 2">赛事精品</li>
            <li :class="{ cur: cur2 == 3 }" @mouseover="cur2 = 3">英雄攻略</li>
          </ul>
          <div>
            <!-- 内容中心请求数据 -->
            <index-content :data="data6" />
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <div>英雄/皮肤</div>
          <div>更多</div>
        </div>
        <ul>
          <li :class="{ cur: cur3 == 1 }" @mouseover="cur3 = 1">最新英雄</li>
          <li :class="{ cur: cur3 == 2 }" @mouseover="cur3 = 2">最新皮肤</li>
          <li :class="{ cur: cur3 == 3 }" @mouseover="cur3 = 3">周免英雄</li>
        </ul>
        <template v-if="cur3 == 1">
          <div class="body" ref="body">
            <div>
              <img
                src="//game.gtimg.cn/images/yxzj/img201606/freehero/horizontal/542.jpg"
                alt=""
              />
              <div class="dd">
                <div>新英雄:暃</div>
                <div>上线时间:2022.01.06</div>
              </div>
              <div>
                <img
                  class="a"
                  src="//game.gtimg.cn/images/yxzj/img201606/freehero/vertical/540.jpg"
                  alt=""
                />
                <img
                  src="//game.gtimg.cn/images/yxzj/img201606/freehero/vertical/538.jpg"
                  alt=""
                />
                <img
                  src="//game.gtimg.cn/images/yxzj/img201606/freehero/vertical/155.jpg"
                  alt=""
                />
                <img
                  src="//game.gtimg.cn/images/yxzj/img201606/freehero/vertical/537.jpg"
                  alt=""
                />
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="cur3 == 2">
          <div class="body" ref="body">
            <div>
              <img
                src="//game.gtimg.cn/images/yxzj/img201606/freehero/horizontal/528_skin.jpg"
                alt=""
              />
              <div class="dd">
                <div>新皮肤:赏金猎手-澜</div>
                <div>上线时间:2022.04.02</div>
              </div>
              <div>
                <img
                  src="//game.gtimg.cn/images/yxzj/img201606/freehero/vertical/199_skin.jpg"
                  alt=""
                />
                <img
                  src="//game.gtimg.cn/images/yxzj/img201606/freehero/vertical/536_skin.jpg"
                  alt=""
                />
                <img
                  src="//game.gtimg.cn/images/yxzj/img201606/freehero/vertical/184_skin.jpg"
                  alt=""
                />
                <img
                  src="//game.gtimg.cn/images/yxzj/img201606/freehero/vertical/537.jpg"
                  alt=""
                />
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="cur3 == 3">
          <div class="d">
            <img
              src="https://game.gtimg.cn/images/yxzj/img201606/freehero/vertical/528.jpg"
              alt=""
            />
            <img
              src="	https://game.gtimg.cn/images/yxzj/img201606/freehero/vertical/125.jpg"
              alt=""
            />
            <img
              src="	https://game.gtimg.cn/images/yxzj/img201606/freehero/vertical/127.jpg"
              alt=""
            />
            <img
              src="	https://game.gtimg.cn/images/yxzj/img201606/freehero/vertical/505.jpg"
              alt=""
            />
            <img
              src="	https://game.gtimg.cn/images/yxzj/img201606/freehero/vertical/169.jpg"
              alt=""
            />
            <img
              src="	https://game.gtimg.cn/images/yxzj/img201606/freehero/vertical/144.jpg"
              alt=""
            />
            <img
              src="	https://game.gtimg.cn/images/yxzj/img201606/freehero/vertical/107.jpg"
              alt=""
            />
            <img
              src="	https://game.gtimg.cn/images/yxzj/web201605/new/more_hero.jpg"
              alt=""
            />
          </div>
        </template>
      </div>
    </div>
    <index-saishi />
  </div>
</template>

<script>
import IndexLunbo from "@/components/IndexLunbo.vue";
import IndexGonggao from "@/components/IndexGonggao.vue";
import IndexContent from "@/components/IndexContent.vue";
import IndexSaishi from "@/components/IndexSaishi.vue";
export default {
  components: { IndexLunbo, IndexGonggao, IndexContent, IndexSaishi },
  data() {
    return {
      cur1: 1,
      cur2: 1,
      cur3: 1,
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      data5: [],
      data6: [],
    };
  },
  watch: {
    cur2(n) {
      if (n == 1) {
        this.get2("1648990377", (x) => {
          this.data6 = x;
        });
      }
      if (n == 2) {
        this.axios
          .get(
            "/api/cmc/cross?serviceId=18&filter=tag&sortby=sIdxTime&source=web_pc&limit=7&logic=or&typeids=1&tagids=2660&exclusiveChannel=4&exclusiveChannelSign=63daa13810c71a151a2e66b3f170fdba&time=1648995402"
          )
          .then((res) => {
            this.data6 = res.data.data.items;
          });
      }
      if (n == 3) {
        this.axios
          .get(
            "/api/cmc/cross?serviceId=18&typeids=2&sortby=sIdxTime&tagids=2543,619&limit=8&source=web_pc&filter=tag&exclusiveChannel=4&exclusiveChannelSign=8f3bc36f1b6b71b4629d6b7bb80285f2&time=1648995875"
          )
          .then((res) => {
            this.data6 = res.data.data.items;
          });
      }
    },
  },
  mounted() {
    this.get("1760", (x) => {
      this.data1 = x;
    });
    this.get("1761", (x) => {
      this.data2 = x;
    });
    this.get("1762", (x) => {
      this.data3 = x;
    });
    this.get("1763", (x) => {
      this.data4 = x;
    });
    this.get("1764", (x) => {
      this.data5 = x;
    });
    this.get2("1648990377", (x) => {
      this.data6 = x;
    });
  },
  methods: {
    get2(x, call) {
      let url =
        "/api/cmc/cross?serviceId=18&typeids=2&sortby=sIdxTime&tagids=1809,1855,2609,4781,4782,4780,5090&limit=8&source=web_pc&filter=tag&logic=or&exclusiveChannel=4&exclusiveChannelSign=f29bff203edb401826d335a0591c1e6d&time=" +
        x;
      this.axios.get(url).then((res) => {
        call(res.data.data.items);
        // console.log(res.data.data.items, 11);
      });
    },
    get(x, call) {
      let url =
        "/api/cmc/cross?serviceId=18&filter=channel&sortby=sIdxTime&source=web_pc&limit=8&logic=or&typeids=1&withtop=yes&exclusiveChannel=4&exclusiveChannelSign=b3f7d251682b5b525c17d47c27efaddd&time=1648967503&chanid=" +
        x;
      this.axios.get(url).then((res) => {
        // console.log(res.data.data.items);
        call(res.data.data.items);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  margin: 620px auto 0;
  width: 1200px;
  .f1 {
    height: 342px;
    display: flex;
    margin: 0 auto;
    > * {
      height: 100%;
    }
    > .left {
      width: 604px;
    }
    > .center {
      padding: 0 17px;
      width: 360px;
      background-color: rgba(38, 37, 45, 0.837);
      ul {
        display: flex;
        color: white;
        border-bottom: 2px solid black;
        // border: 1px solid red;
        padding: 0 4px;
        justify-content: space-between;
        li {
          line-height: 40px;
          padding: 0 8px;
          cursor: pointer;
          // border: 1px solid blue;
          &.cur {
            border-bottom: 3px solid rgb(243, 194, 88);
            color: rgb(243, 194, 88);
          }
        }
      }
    }
    > .right {
      width: 236px;
      div {
        cursor: pointer;
        background-image: url("/public/img/index.png");
        &:first-child {
          height: 128px;
          background-position: 0 -219px;
        }
        &:nth-child(2) {
          height: 106px;
          background-position: 0 -350px;
        }
        &:nth-child(3) {
          height: 108px;
          background-position: 0 -461px;
        }
      }
    }
  }
  .f2 {
    padding: 28px 0 34px 0;
    display: flex;
    justify-content: space-between;
    div {
      overflow: hidden;
      // border: 1px solid red;
    }
    img {
      cursor: pointer;
      height: 100%;
      border-radius: 3px;
      transition: 0.2s;
      &:hover {
        transform: scale(1.1);
      }
    }
  }
  .f3 {
    img {
      border-radius: 3px;
    }
    display: flex;
    justify-content: space-between;
    .left {
      // border: 1px solid red;
      width: 872px;
      height: 528px;
      .top {
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        div {
          background-image: url("/public/img/index.png");
          &:first-child {
            height: 26px;
            width: 140px;
            text-align: center;
            background-position: 0 -106px;
            font-size: 22px;
            line-height: 25px;
            font-weight: bold;
            padding-left: 15px;
          }
          &:last-child {
            background-position: -252px 4px;
            padding-left: 20px;
            color: gray;
          }
        }
      }
      .body {
        ul {
          display: flex;
          li {
            width: 33.33%;
            text-align: center;
            background-color: rgb(245, 245, 245);
            line-height: 29px;
            color: gray;
            cursor: pointer;
            &:not(:last-child) {
              border-right: 1px solid gray;
            }
            &.cur {
              color: black;
              border-bottom: 3px solid orange;
            }
          }
        }
      }
    }
    .right {
      width: 295px;
      height: 528px;
      // border: 1px solid greenyellow;
      overflow: hidden;
      .top {
        display: flex;
        justify-content: space-between;
        div {
          background-image: url("/public/img/index.png");
          &:first-child {
            padding-left: 22px;
            background-position: 0 -142px;
            font-size: 22px;
            font-weight: bold;
          }
          &:last-child {
            background-position: -252px 4px;
            padding-left: 20px;
          }
        }
      }
      ul {
        display: flex;
        margin-top: 13px;
        li {
          width: 33.33%;
          text-align: center;
          background-color: rgb(245, 245, 245);
          line-height: 29px;
          color: gray;
          cursor: pointer;
          &:not(:last-child) {
            border-right: 1px solid gray;
          }
          &.cur {
            color: black;
            border-bottom: 3px solid orange;
          }
        }
      }
      .body {
        > div {
          margin-top: 20px;
          width: 100%;
          // border: 1px solid red;
          height: 400px;
          &:first-child {
            > div:nth-child(2) {
              padding: 0 10px 10px 10px;
              // border: 1px solid red;
              > div:first-child {
                font-size: 18px;
                font-weight: bold;
              }
              > div:last-child {
                font-size: 12px;
                color: gray;
              }
            }
            > div:last-child {
              // border: 1px solid red;
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
      .d {
        margin-top: 20px;
        img {
          &:not(:nth-child(4) :nth-child(8)) {
            margin-right: 5px;
          }
        }
      }
    }
    // .a:hover {
    //   opacity: 0.1;
    //   background-color: black;
    // }
  }
}
</style>